{extend name="public/base" /}

{block name="title"}添加站点{/block}

{block name="main"}

<form class="layui-form layui-row " action="" method="post">
<div class="demoTable">
  搜索ID：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" lay-submit="" lay-filter="addFrom">搜索</button>
</div>
</form>

<table id="demo" lay-filter="test"></table>
<table class="layui-table" lay-skin="line">
  行边框表格（内部结构参见右侧目录“常规用法”）
</table>


{/block}
{block name="script"}
<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo',
    id: 'testReload',
    method : 'post',
    height: 'auto',
    url: '/test/layui/data', //数据接口
    page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
      layout: [ 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
      //,curr: 5 //设定初始在第 5 页
      theme: '#FFB800', 
      groups: 5, //只显示 1 个连续页码
      first: '首页', //不显示首页
      //last: false, //不显示尾页      
    }, //开启分页
    cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
      {field: 'username', title: '用户名', width:80},
      {field: 'sex', title: '性别', width:80, sort: true,edit: 'text'},
      {field: 'city', title: '城市', width:200,edit: 'text'} ,
      {field: 'sign', title: '签名', width: 277},
      {field: 'experience', title: '积分', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'classify', title: '职业', width: 150},
      {field: 'wealth', title: '财富', width: 135, sort: true,fixed: 'right'}
    ]]
  });
  
  layui.form.on('submit(addFrom)',function(data){
        table.reload('testReload', {
            page: { curr: 1 },//重新从第 1 页开始
            where: data.field
        });    
        return false;
  });
  
  table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      console.log(obj.value); //得到修改后的值
      console.log(obj.field); //当前编辑的字段名
      console.log(obj.data); //所在行的所有相关数据  
  });
  
});
</script>
{/block}